<template>
  <div class="after-sales">
    <!-- 该页面是售后及跟踪管理页面 -->
    <!-- 查询条件 -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="售后原因">
        <el-select v-model="queryParams.afterSalesReason" placeholder="请选择..." style="width: 100px">
          <el-option label="全部" value=""/>
          <el-option label="产品含量低于标准或约定值" value="产品含量低于标准或约定值"/>
          <el-option label="其他原因" value="其他原因"/>
        </el-select>
      </el-form-item>
      <el-form-item label="购买日期">
        <el-date-picker
          v-model="queryParams.purchaseDateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border stripe>
      <el-table-column prop="afterSalesRecordNumber" label="售后记录编号" />
      <el-table-column prop="salesContractNumber" label="销售合同编号" />
      <el-table-column prop="trackingStatus" label="跟踪状态" />
      <el-table-column prop="contractDate" label="合同日期" />
      <el-table-column prop="contactPerson" label="联系人" />
      <el-table-column prop="afterSalesReason" label="售后原因" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column prop="updater" label="更新人" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNo"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface AfterSales {
  afterSalesRecordNumber: string
  salesContractNumber: string
  trackingStatus: string
  contractDate: string
  contactPerson: string
  afterSalesReason: string
  updateTime: string
  updater: string
}

const tableData = ref<AfterSales[]>([
  {
    afterSalesRecordNumber: 'BM976650001',
    salesContractNumber: 'XSHT0201',
    trackingStatus: '未开始',
    contractDate: '2025-06-23',
    contactPerson: 'Anna',
    afterSalesReason: '产品含量低于标准或约定值',
    updateTime: '2025-01-23 15:34:28',
    updater: '赵刚'
  },
  {
    afterSalesRecordNumber: 'BM976650002',
    salesContractNumber: 'XSHT0116',
    trackingStatus: '处理中',
    contractDate: '2025-06-18',
    contactPerson: 'Anna',
    afterSalesReason: '产品含量低于标准或约定值',
    updateTime: '2024-12-24 10:34:27',
    updater: '王小秋'
  },
  {
    afterSalesRecordNumber: 'BM976650003',
    salesContractNumber: 'XSHT0005',
    trackingStatus: '已完成',
    contractDate: '2025-06-12',
    contactPerson: 'Anna',
    afterSalesReason: '产品含量低于标准或约定值',
    updateTime: '2024-10-12 10:16:43',
    updater: '王四海'
  }
])

const total = ref(3)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  afterSalesReason: '',
  purchaseDateRange: []
})

const handleQuery = () => {
  // 这里可以添加实际的查询逻辑
  ElMessage.success('查询成功')
}

const resetQuery = () => {
  // 重置查询参数
  queryParams.afterSalesReason = ''
  queryParams.purchaseDateRange = []
}

const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
}

const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
}
</script>

<style scoped>
.after-sales {
  padding: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px; /* 与表格的间距 */
}
</style>
